<template>
  <u-popup :show="show" mode="center"  @close="closeHandle" bgColor="transparent">
  	<view class="yiyuan-intro-container">
      <view class="img-bg-wrapper">
        <image class="img-bg" :src="staticImgs.bg" mode=""></image>
      </view>
     <view class="yiyuan-intro-modal-position">
       <view class="yiyuan-intro-modal">
          <view class="row-1">完成本次测评可获得</view>
          <view class="row-2">测评1元兑换券</view>
          <view class="row-3" @click="closeHandle">
            <image class="img" :src="staticImgs.btnImg" mode=""></image>
          </view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>

   export default {
     props: {
       visible: {
         type: Boolean,
         default: false
       }
     },
     watch: {
       visible(val) {
         this.show = val
       }
     },
     data() {
       return {
         staticImgs:{
           bg: this.imgBaseURL + '/scl/yiyuan-modal/yiyuan-intro-modal-bg.png',
           btnImg: this.imgBaseURL + '/scl/yiyuan-modal/yiyuan-intro-modal-btn.png',
         },
         show: false,
       }
    },
    methods:{
      closeHandle(){
        this.show = false
      }
    }     
   }
</script>

<style lang="scss" scoped>

  .yiyuan-intro-container{
    width: 534rpx;
    height: 748rpx;
    // background-color: red;
    position: relative;
    .img-bg-wrapper {
      display: flex;
      justify-content: center;
      position: absolute;
      z-index: 999;
      top: 0;
      left: 0;
      right: 0;
    
      .img-bg {
        width: 534rpx;
        height: 748rpx;
        margin: auto;
      }
    }
    
    .yiyuan-intro-modal-position{
      position: absolute;

      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 999;
      
      .yiyuan-intro-modal{
        // padding-top: 140rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        height: 100%;
        
        .row-1{
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #430C0C;
          line-height: 45rpx;
          text-align: center;
          font-style: normal;
          margin-bottom: 10rpx;
        }
        
        .row-2{
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 50rpx;
          color: #FC494F;
          line-height: 70rpx;
          text-align: center;
          font-style: normal;
          
          margin-bottom: 45rpx;
        }
        
        .row-3{
          margin-bottom: 60rpx;
          .img{
            width: 290rpx;
            height: 90rpx;
          }
        }
      }
      
    }
    
  }
</style>